<!--
 * @Author: Bo Cai
 * @Mail: caibo0520@qq.com
 * @Date: 2021-12-14 23:02:17
 * @LastEditors: Bo Cai
 * @LastEditTime: 2021-12-26 00:32:08
-->
<template>
    <div class="app-container">
        <el-form label-width="120px">
            <el-form-item label="轮播图名称">
                <el-input v-model="bannerInfo.title" />
            </el-form-item>

            <el-form-item label="轮播图链接地址">
                <el-input v-model="bannerInfo.linkUrl" />
            </el-form-item>

            <el-form-item label="排序">
                <el-input-number
                    v-model="bannerInfo.sort"
                    controls-position="right"
                />
            </el-form-item>

            <!-- banner-->
            <el-form-item label="轮播图">
                <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :action="BASE_API + '/admin/oss/file/upload'"
                    class="avatar-uploader"
                >
                    <img
                        :src="bannerInfo.imageUrl"
                        style="width: 280px; height: 200px"
                    />
                </el-upload>
            </el-form-item>

            <el-form-item>
                <el-button
                    :disabled="saveBtnDisabled"
                    type="primary"
                    @click="saveOrUpdate()"
                    >保存</el-button
                >
            </el-form-item>
        </el-form>
    </div>
</template>




<script>
import Tinymce from '@/components/Tinymce'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
import bannerApi from '@/api/banner/banner'

export default {
    // 声明组件
    components: { Tinymce, ImageCropper, PanThumb },

    data() {
        return {
            bannerInfo: {
                id: '',
                title: '',
                linkUrl: '',
                sort: 0,
                imageUrl:
                    'https://caibo-0520.oss-cn-shenzhen.aliyuncs.com/banner/%E8%BD%AE%E6%92%AD%E5%9B%BE%E4%B8%BB%E9%A1%B5.png',
            },
            saveBtnDisabled: false, // 保存按钮是否禁用,
            BASE_API: process.env.BASE_API, // 获取dev.env.js里面的地址
        }
    },
    created() {
        if (this.$route.params && this.$route.params.id) {
            this.bannerInfo.id = this.$route.params.id
            this.getBannerByIdMethod()
        }
    },
    methods: {
        getBannerByIdMethod() {
            bannerApi.getBannerById(this.bannerInfo.id).then((response) => {
                this.bannerInfo = response.data.item
            })
        },
        beforeAvatarUpload() {},
        handleAvatarSuccess(res, file) {
            //上传封面成功调用的方法
            this.bannerInfo.imageUrl = res.data.url
        },
        saveOrUpdate() {
            //this.saveBtnDisabled = true
            if (!this.bannerInfo.id) {
                this.saveData()
            } else {
                this.updateData()
            }
            //跳转到第二步
            this.$router.push({ path: '/banner/list' })
        },
        // 保存数据
        saveData() {
            bannerApi.addBanner(this.bannerInfo).then((response) => {
                //提示
                this.$message({
                    type: 'success',
                    message: '添加Banner信息成功!',
                })
            })
        },
        updateData() {
            bannerApi.updateBanner(this.bannerInfo).then((response) => {
                //提示
                this.$message({
                    type: 'success',
                    message: '更新Banner信息成功!',
                })
            })
        },
    },
}
</script>
